<template>
    <div class="view">
        <nav-bar backgroundColor="#7bbcff" color="#fff" title="我的订单" :fixed="false">
            <div class="back" slot="left" @click="back">
                <i class="iconfont icon-fanhui"></i>
            </div>
        </nav-bar>
        <div class="order-nav">
            <div class="order-nav-wrap">
                <ul>
                    <li :class="{acitve:status==='999' }" @click="selectStatus('999')">
                        <div class="text">全部</div>
                    </li>
                    <li :class="{acitve:status==='0'}" @click="selectStatus('0')">
                        <div class="text">待付款</div>
                    </li>
                    <li :class="{acitve:status==='1'}" @click="selectStatus('1')">
                        <div class="text">已付款</div>
                    </li>
                    <li :class="{acitve:status==='2'}" @click="selectStatus('2')">
                        <div class="text">待评价</div>
                    </li>
                    <li :class="{acitve:status==='3'}" @click="selectStatus('3')">
                        <div class="text">售后</div>
                    </li>
                </ul>
            </div>
        </div>
        <div class="order-list-warp">
            <cube-scroll :data="orderList" ref="scroll">
                <fillet-card class="order-item" v-for="(orderItem,index) in orderList" :key="index">
                    <div class="order-content" slot="content">
                        <div class="order-head">
                            <div class="order-time">{{orderItem.CreateTime | timeFilter}}</div>
                            <div class="order-status">{{orderItem.Status }}</div>
                        </div>
                        <div class="order-body">
                            <div class="order-sub" v-for="sub in orderItem.Items" :key="sub.Id">
                                <div class="picture">
                                    <img :src="sub.Image">
                                </div>
                                <div class="info">
                                    <div class="name ellipsis-2">{{sub.CourseName}}</div>
                                    <div class="number">
                                        <div class="amount">x{{sub.Amount}}</div>
                                        <div class="price">{{sub.Price}}</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="order-statistics">
                            <span>共计{{orderItem.Items.length}}件商品</span>
                            <i>合计:¥{{orderItem.Amount}}</i>
                        </div>
                        <div class="order-footer" v-if="orderItem.Status==='待付款'">
                            <div class="order-btn" @click="orderPay(orderItem.Id)">付款</div>
                        </div>
                    </div>
                </fillet-card>
            </cube-scroll>
        </div>
    </div>
</template>

<script lang="ts">
    import {Component, Vue, Watch} from "vue-property-decorator";
    import Scene from "@/render/Scene";
    import Http from "@/service/Http";
    import {Getter, Action, State, Mutation} from "vuex-class";
    import {InterfaceUser} from "@/interface/InterfaceUser";

    import NavBar from "@/components/aui/NavBar.vue";
    import FilletCard from "@/components/aui/FilletCard.vue";
    import ListCell from "@/components/aui/ListCell.vue";

    import CommonUnit from "@/unit/CommonUnit";

    @Component({
        components: {
            NavBar, FilletCard
        },
        filters: {
            timeFilter: (v: string) => {
                const dataArray: string[] = v.split(" ")[0].split("/");
                return `${dataArray[2]}年${dataArray[1]}月${dataArray[0]} ${v.split(" ")[1]}`;
            }
        },
    })
    export default class OrderList extends Scene {
        private status: string = "999";
        private orderList: object[] = [];

        @State("UserStore")
        public user!: InterfaceUser;

        private mounted(): void {
            this.status = (<any> this).$route.query.status || "999";
            this.getOrderist();
        }

        private back(): void {
            this.navigateBack();
        }

        private selectStatus(status: string): void {
            this.status = status;
            this.getOrderist();
        }

        private async getOrderist(): Promise<any> {
            const res = await Http.get(this.api.orderList, CommonUnit.argumentWithUser(this.user, {status: this.status}));
            if (res.Success) {
                (<any> this.$refs).scroll.scrollTo(0, 0);
                this.orderList = res.Data;
            } else {
                (<any> this).$createToast({
                    mask: true,
                    type: "error",
                    time: 1500,
                    txt: res.Message,
                    onTimeout: () => {
                        if (!CommonUnit.responseLoginVerification(res)) {
                            this.navigateLoginPage();
                        }
                    }
                }).show();
            }
        }

        private orderPay(id: string): void {
            this.navigateTo({
                name: "orderConfirm",
                query: {
                    orderId: id,
                    type: 1
                    //    type:1 课程订单
                }
            });
        }

    }
</script>

<style scoped lang="stylus">
    .view
        height 100vh;
        background $theme-page-common-background-color;

    .order-nav
        height 40px;
        background #fff;

        .order-nav-wrap
            width 100%;

            ul
                display flex;
                box-pack center;
                justify-content center;
                background $theme-gray-lv9;
                font-size 14px;

                li
                    box-flex 1;
                    flex 1;
                    max-width 25%;
                    height 40px;
                    align-items stretch;
                    justify-content center;
                    display flex;

                    .text
                        line-height 40px

                    &.acitve
                        .text
                            box-sizing border-box;
                            border-bottom 2px solid $theme-common-color;
                            color $theme-common-color;

    .order-list-warp
        height calc(100vh - 40px - 44px - env(safe-area-inset-top));

        .order-item
            margin-top 10px

            .order-head
                height 40px;
                display flex;
                padding 0 10px;
                justify-content space-between;
                align-items center;
                position relative;

                &:after
                    content '';
                    display block;
                    height 1px;
                    left 0;
                    right 0;
                    background $theme-gray-lv5;
                    position absolute;
                    bottom 0;

                .order-time
                    font-size 12px;
                    color $theme-auxiliary-color

                .order-status
                    font-size 13px;
                    color $theme-common-color;

            .order-body
                .order-sub
                    position relative;
                    display flex;
                    height 90px;
                    justify-content space-between;
                    padding 10px;

                    .picture, .picture img
                        width 60px;
                        height auto;
                        min-height 60px;

                    .info
                        width calc(100% - 70px);
                        display flex;
                        flex-direction column;
                        padding 2px 0;

                        .name
                            line-height 20px;
                            height 40px;

                        .number
                            display flex;
                            justify-content space-between;
                            font-size 12px;
                            margin-top 3px;
                            line-height 20px;

                            .amount
                                color #999;

                            .price
                                color #333;
                                font-size 17px;

                                &:before
                                    content '¥';
                                    font-size 12px;

            .order-statistics
                width 100%;
                height 32px;
                line-height 32px;
                position relative;
                padding 0 10px;
                text-align right;
                letter-spacing .4px;
                font-size 12px;

                span
                    color #999;
                    padding-right 10px;

                i
                    font-style normal;
                    color #333;

            .order-footer
                border-top 1px solid $theme-gray-lv6;
                height 46px;
                display flex;
                flex-direction row-reverse;
                align-items center;
                padding 0 10px;

                .order-btn
                    letter-spacing .4px;
                    display inline-block
                    height 26px;
                    color #666;
                    padding 0 20px;
                    font-size 12px;
                    line-height 26px;
                    border-radius 26px;
                    border 1px solid #999;


</style>
